﻿<template>
    <div v-loading = "loading">
      <div style="float:left;z-index:9999;margin-top:10px">
        <el-select class="item-choose" placeholder="请选择查询范围" v-model="value" size="mini">
            <el-option
                v-for="(item,index) in options"
                :key="index"
                :label="item.label"
                :value="item.value">
            </el-option>
        </el-select>
      </div>
      <div class="container" style="float:left;margin-top:10px;margin-left:10px">
        <div class="block" v-if="value==1">
          <el-date-picker
            v-model="setYear"
            type="year"
            placeholder="选择年" size="mini" @change="yearChange">
          </el-date-picker>
        </div>
        <div class="block" v-if="value==2">
          <el-date-picker
            v-model="setMouth"
            type="month"
            placeholder="选择月" size="mini" @change="monthChange">
          </el-date-picker>
        </div>
      </div>
      <!-- <div class="zrender" :style="width2zrender,height2zrender" style="">
        <accountzrender :setTime='setTime' :width2zrender="width2zrender" :height2zrender="height2zrender"></accountzrender>
      </div> -->
      <div class="map" :style="width2map,height2map" style="">
        <accountmap :setTime='setTime' :width2map="width2map" :height2map="height2map"></accountmap>
      </div>
    <div style="width:750px;height:30px;border:0px soild black;margin-top:180px;margin-bottom:-50px;">
     <!--  <span style="font-size:13px;margin-left:-240px;color:grey;">按个人名称查询</span> -->
    <!--  <el-input size="mini" style="width: 220px;margin-left:-420px;" v-model="chartUser" placeholder="请输入查询人名..."
            ></el-input> -->
            <el-select v-model="chartUser" filterable style="width: 220px;margin-left:-440px;" placeholder="请选择个人名称查询" size="mini" @change="loadDrawLineData">
              <el-option
                v-for="item in userData"
                :key="item.user_name"
                :label="item.user_name"
                :value="item.user_id">
              </el-option>
        </el-select>
          
           <!--  <el-button
                      type="primary"
                      size="mini"
                      icon="el-icon-search"
                     
                    >查找
                     </el-button> -->
      </div>
      <div id="exp" style="margin-top: 100px;">
        <Chart id="test"/>
      </div>
      <div class="analyzeSystem" style="margin-left:300px;margin-top:100px;">
        <div :class="className" :id="id" :style="{height:height,width:width}" ref="myEchart"></div>
      </div>
    </div>

</template>
<script>
import AccountMap from './AccountMap.vue'
import AccountZrender from './AccountZrender.vue'
import 'echarts/map/js/china.js';
import Chart from "../account/Line";
import echarts from "echarts";
export default {
   name: 'exp',
   name: "analyzeSystem",
   props: {
    className: {
      type: String,
      default: "yourClassName"
    },
    id: {
      type: String,
      default: "yourID"
    },
    width: {
      type: String,
      default: "500px"
    },
    height: {
      type: String,
      default: "500px"
    }
  },
  data () {
    return {
      width2zrender:'30%',
      height2zrender:'400px',
      width2map:'100%',
      height2map:'400px',
      value:'',
      options:[{value:1,label:'按年查询'},{value:2,label:'按月查询'}],
      setYear:'',
      setMouth:'',
      totalData:[],
      respData:[],
      value:[],
      name:[],
      userData:[],
      chart: null,
      setTime:'-1',
      chartUser:'',
      overtime_all_time:'',
      loading:false,
      
    }
  },
  components: {
    'accountmap':AccountMap,
    'accountzrender':AccountZrender,
    Chart
  },
  mounted(){
     this.loadPieData();
    this.loadDrawLineData();
    this.drawLine2();
    this.loadUserData();
    
    
  },
  //Pie
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    loadUserData(){
      this.getRequest("/expense/userdata").then(resp=>{
          if(resp&&resp.status==200){
              this.userData=resp.data
              this.chartUser =this.$store.state.user.id
          }
        })
    },
    loadPieData(){
         var _this = this;
         var year='';
          var mouth='';
         if(this.setMouth!=''){
            mouth=this.createdTimeFormartToMonth(this.setMouth);
          }
          if(this.setYear!=''){
            year=this.createdTimeFormartToYear(this.setYear)
          }
          var pieData=[];
          this.postRequest("/expense/pie",{
           user_id:this.chartUser,
           mouth:mouth,
           year:year
        }).then(resp=> {
          if (resp && resp.status == 200) {
            pieData = resp.data;
            this.initChart(pieData);
           }
         })
        },
     initChart(pieData) {
      this.chart = echarts.init(this.$refs.myEchart);
      //配置和数据
      this.chart.setOption({
        backgroundColor: "#2c343c",

        title: {
          text: "报销种类Pie图",
          left: "center",
          top: 20,
          textStyle: {
            color: "#ccc"
          }
        },

        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 8]
          }
        },
        
        series: [
          {
            name: "报销种类",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: pieData 
            /* data: [{"name":"交通费","value":"110.00"},{"name":"其他报销","value":"30.00"},{"name":"补助","value":"200.00"},{"name":"餐费","value":"60.00"}] */
            .sort(function(a, b) {
              return a.value - b.value;
            }), 
            roseType: "radius",
            label: {
              normal: {
                textStyle: {
                  color: "rgba(255, 255, 255, 0.3)"
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: "rgba(255, 255, 255, 0.5)"
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              }
            },
            itemStyle: {
              normal: {
                color: "#9D9D9D",
                shadowBlur: 100,
                shadowColor: "rgba(255, 255, 255, 0.5)"
              }
            },

            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function(idx) {
              return Math.random() * 200;
            }
          }
        ]
      });
    },
    
    loadDrawLineData(){
          var _this = this;
          var year='';
          var mouth='';
          if(this.setMouth!=''){
            mouth=this.createdTimeFormartToMonth(this.setMouth);
          }
          if(this.setYear!=''){
            year=this.createdTimeFormartToYear(this.setYear)
          }
          this.postRequest("/expense/chart",{
           user_id:this.chartUser,
           mouth:mouth,
           year:year
        }).then(resp=> {
          if (resp && resp.status == 200) {
             _this.respData = resp.data;

              this.drawLine2();
              this.loadPieData();
           }
         })
      },
       drawLine2(){
         let myChart = this.$echarts.init(document.getElementById('test'))
        
        let value = [];
       let name =[];
        this.respData.forEach(function(item){
          name.push(item.name);
          value.push(item.value)
        }); 
         let option={
           title: {
                     text: "报销金额个人图"
           },
           legend: {
             data: ["加班报销金额"]
           },
           tooltip: {
            trigger: 'item',
            position:'right',
            formatter : function(params, ticket, callback) {
        if (params.value == undefined || params.value !== params.value) {
            params.value = 0;
        }
        return  params.seriesName +" <br />" + params.name + ":" +  "¥"+params.value ;        
    }
},
            
           xAxis: {
             
                axisLabel: {  
                interval:0,  
               rotate:25  
},
                data: name
                // data:["项目1","项目2","项目3","项目4"]
           },
           yAxis: [
             {
               type: "value"
            }
           ],
          series: [
             {
               name: "报销金额",
               type: "line",
                data: value
                // data:["9000","8000",
               /*  {
                    value:5000,
                    symbol: 'arrow',  // 数据级个性化拐点图形
                    symbolSize : 15,
                    itemStyle : { normal: {
                    color: 'red',
                    lineStyle: {        // 系列级个性化折线样式
                        width: 2,
                        type: 'dashed'
                    }
                    }
                    }
                }, */
                // "5000","6399"]
             },
             {
               name: "报销金额",
               type: "bar",
                data: value,
                // data:["9000","8000","5000","6399"],
                barWidth : 30,
                itemStyle:{
                     normal:{
                    color: function (params){
                    var colorList = ['rgb(164,205,238)','rgb(42,170,227)','rgb(25,46,94)','rgb(195,229,235)'];
                    return colorList[params.dataIndex];
                }
                                    }
                                }
             }
           ]
         };
        myChart.setOption(option, true);
       },
    
    yearChange(){
      this.setTime=this.createdTimeFormartToYear(this.setYear);
      this.setMouth='';
      this.loadPieData();
      this.loadDrawLineData(); 
    },
    monthChange(){
      this.setTime=this.createdTimeFormartToMonth(this.setMouth);
      this.setYear='';
      this.loadPieData();
      this.loadDrawLineData(); 
    },
    createdTimeFormartToMonth(time){
      let date = new Date(Date.parse(time));
      let y = date.getFullYear();
      let m = date.getMonth()+1;
      m=(m<10?'0'+m:m);
      return y+'-'+m;
    },
    createdTimeFormartToYear(time){
      let date = new Date(Date.parse(time));
      let y = date.getFullYear();
      return y+'';
    },
    timeChange(){

    }
  }

}
</script>
